<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米轮播图--手练版</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	.wrap{
		width: 800px;
		height:500px;
		position: relative;
	}

	.list{
		width: 800px;
		height:500px;
		position: relative;
	}

	.item{
		width: 800px;
		height:500px;
		position: absolute;
		background-size: 800px 500px;

	}

.list li:nth-child(1){
	background-image: url('./images/1.jpg');
}

.list li:nth-child(2){
	background-image: url('images/2.jpg')
}

.list li:nth-child(3){
	background-image: url('images/3.jpg')
}

.list li:nth-child(4){
	background-image: url('images/4.jpg')
}

.list li:nth-child(5){
	background-image: url('images/5.jpg')
}
	

	input{
		width: 40px;
		height: 70px;
		border:none;
		position:absolute;
		top:190px;
		z-index: 2;
		cursor: pointer;
		opacity: 0.1;
		border-radius: 2px;
	}


	.PrevBtn{
		background-image: url('images/Next_Prev.png');
		background-repeat: no-repeat;
		background-position: 0px 0px;
		left: 0;
	}

	.NextBtn{
		background-image: url('images/Next_Prev.png');
		background-repeat: no-repeat;
		background-position: -42px 0px;
		right: 0;
	}

	.item.active{
		z-index: 2;
		transition: all 1.8s linear;
	}

	.point_list{
		position:absolute;
			bottom:15px;
			right: 50px;
			z-index: 3;
	}

	.point{
			width: 13px;
		height: 13px;
		margin: 0 5px;
		background-color: rgba(255,255,255,1);
		display: inline-block;
		border-radius: 100%;
		border: 3px solid rgba(0,0,0,1);
		cursor: pointer;
	}

	.point.active{
		background-color: red;
	}





</style>
</head>
<body>
	
<div class="wrap">
	<ul class="list">
		<li class="item active" ></li>
		<li class="item" ></li>
		<li class="item" ></li>
		<li class="item" ></li>
		<li class="item" ></li>
	</ul>

	<input type="button" class="PrevBtn" id="goPrev"></input>
	<input type="button" class="NextBtn" id="goNext"></input>

	<ul class="point_list">
		<li class="point active" data-index='0'></li>
		<li class="point" data-index='1'></li>
		<li class="point" data-index='2'></li>
		<li class="point" data-index='3'></li>
		<li class="point" data-index='4'></li>
	</ul>

</div>




<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	var items=document.getElementsByClassName('item')
	var goPrevBtn=document.getElementById('goPrev')
	var goNextBtn=document.getElementById('goNext')
	var points=document.getElementsByClassName('point')
	var list_main=document.getElementsByClassName('list')


	var index=0
	var time=0




	var clearActive=function(){
		for(var i=0; i<items.length; i++){
			items[i].className = 'item'
		}	

		for(var i=0; i<points.length; i++){
			points[i].className= 'point'
		}
	}


	var goindex=function(){
		clearActive()
		items[index].className = 'item active'
		points[index].className = 'point active'
	}



	var goNext=function(){
		if(index<items.length-1){
			index++
		}else{
			index=0
		}
		
		goindex()
	}


goNextBtn.addEventListener('click',function(){
	goNext()
	time=0
})



	var goPrev=function(){
		if(index > 0){
			index--
		}else{
			index = items.length-1
		}
		goindex()
	}


goPrevBtn.addEventListener('click',function(){
	goPrev()
	time=0
})




//圆点

for(var i=0; i<points.length; i++){
	points[i].addEventListener('click',function(){
		//getAttribute---获取标签属性，这里获取一个数	
		var pointIndex=this.getAttribute("data-index")

		index=pointIndex
		goindex()
		time=0
	})
}



//定时器
	var aotubanner=setInterval(function(){
		time++
		if(time==3){
			goNext()
			time=0
		}
	},1000)//定时器自动使用

//鼠标进入list轮播图面板时暂停自动轮播
// list_main.addEventListener("mouseover",function(){
// 	time=0
// })



//JQ函数，进入退出面板的按钮透明度改变
$(document).ready(function(){
  $(".wrap").hover(
  	function(){$("input").css( "opacity",'0.7' ) },
    function(){$("input").css( "opacity",'' )},
  );

  $('.wrap').mouseenter(function(){
  	window.clearInterval(aotubanner)
  });
})


</script>
	
</body>
</html>